<template>
  <view class="content">
    <view class="homeHeader">
      <view class="flex flex-align flex-bt">
        <view class="left flex flex-align " @click="handleClick" v-if="isLeft!=3">
          <view class="address one-omit" style="max-width: 200rpx;" v-if="counter.getToken&&addressInfo.pickup==1">{{addressInfo.store_name||'暂无自提点信息'}}</view>
          <view class="address one-omit" style="max-width: 200rpx;" v-else-if="counter.getToken&&addressInfo.pickup==2">{{addressInfo.name||'暂无团长'}}</view>
          <view class="address one-omit" style="max-width: 200rpx;" v-else-if="counter.getToken&&Object.keys(addressInfo).length==0">暂无自提点</view>
          <view class="address" @click="goLogin" v-else>请登录</view>
          <image src="@/static/home/home_01.png" mode="scaleToFill" />
        </view>
        <view></view>
        <view class="right flex flex-align">
          <view  @click="menuJump({is_tab: false,link: '/pages/index/search',link_type: 1})">
            <image src="@/static/home/home_03.png" mode="scaleToFill" />
          </view>
          <view class="notice" @click="menuJump({is_tab: false,link: '/pages/notice/notice',link_type: 1})">
            <image  src="@/static/home/home_04.png"  mode="scaleToFill" />
            <text class="flex flex-align flex-center">8</text>
          </view>
          
        </view>
      </view>
      <view class="lunbo">
        <swiper class="screen-swiper" @change="chanLeft" circular :autoplay="autoplay" :interval="5000" :duration="500" :acceleration="true">
          <swiper-item v-for="(item,index) in bannerInfo" :key="index">
            <view class="swiper-item">
              <video @play="autoplay=false" :enable-progress-gesture="false" @pause="autoplay=true" v-if="item.banner_type==1" :poster="getImgUrl(item.video_cover_url)" :src="getImgUrl(item.address_url)"></video>
              <image @click="goUrl(item)" v-else :src="getImgUrl(item.address_url)" mode="scaleToFill" />
            </view>
          </swiper-item> 
        </swiper>
      </view>
      <view class="notices flex flex-align flex-bt">
        <image class="left" src="@/static/home/home_02.png" mode="scaleToFill" />
        <view class="right flex">
          <uni-notice-bar class="notices-swiper" scrollable background-color="#fff" color="#7B3800" :speed="50" :text="noticeInfo" />
          <!-- <swiper class="notices-swiper" circular :autoplay="true" :vertical="true" :interval="5000" :duration="500">
            <swiper-item class="flex flex-align" v-for="(item,index) in noticeInfo" :key="index">
              <view class="title one-omit">热烈庆祝微宝优选二号店盛大开业！热烈庆祝微宝优选二号店盛大开业！</view>
            </swiper-item> 
            <swiper-item class="flex flex-align">
              <view class="title one-omit">热烈庆祝微宝优选二号店盛大开业！热烈庆祝微宝优选二号店盛大开业！</view>
            </swiper-item>
            <swiper-item class="flex flex-align">
              <view class="title one-omit">热烈庆祝微宝优选二号店盛大开业！热烈庆祝微宝优选二号店盛大开业！</view>
            </swiper-item>
          </swiper> -->
        </view>
      </view>
    </view>
    <view class="homeTool">
      <view class="homeTitle"><text>功能入口</text></view>
      <view class="toolList flex">
        <view class="scroll-view-item flex-1" v-for="(item,index) in toolList" :key="index" @click="doLogin(item.page_url)">
          <view class="imgs">
            <image :src="getImgUrl(item.icon_url)" mode="scaleToFill" />
            <view class="bgYuan"></view>
          </view>
          <view class="title">{{item.page_name}}</view>
          <view class="miaoshu">{{item.subtitle}}</view>
        </view>
        <!-- <scroll-view :scroll-x="true" class="scroll-Y" :show-scrollbar="false">
          <view class="scroll-view-item" v-for="(item,index) in toolList" :key="index" @click="doLogin(item.page_url)">
            <view class="imgs">
              <image :src="getImgUrl(item.icon_url)" mode="scaleToFill" />
              <view class="bgYuan"></view>
            </view>
            <view class="title">{{item.page_name}}</view>
            <view class="miaoshu">{{item.subtitle}}</view>
          </view>
				</scroll-view> -->
      </view>
    </view>
    <view class="goodsSelect">
      <view class="homeTitle"><text>好物甄选</text></view>
      <view class="toolList" v-if="shopList.length!=0">
        <!-- <scroll-view scroll-x="true" class="scroll-Y" scroll-with-animation="true" :scroll-into-view=toview>
            <view v-for="(item,index) in shopList" :key="index" @click="tabIndex(index)" :id="'pro_'+index" :class="swIndex==Number(index)?'scroll-Img active':'scroll-Img'">
              <image :src="getImgUrl(item.goods_cover)" mode="scaleToFill" />
            </view>
				</scroll-view> -->
        <swiper class="goodswiper" @change="intervalChange" :current="swIndex" circular :interval="5000" :duration="500" previous-margin="30rpx" next-margin="30rpx">
          <swiper-item v-for="(item,index) in shopList" :key="index">
            <view class="swiper-item" @click="menuJump({is_tab: false,link: '/pages/shop/detail?idcode='+item.id,link_type: 1})">
              <image :src="getImgUrl(item.goods_cover)" mode="scaleToFill" />
              <image class="fanquan" v-if="item.return_coupon"
                src="/static/home/home_09.png"
                mode="scaleToFill"
              />
              <view class="mg15">
                <view class="miaoshu flex flex-align flex-bt">
                  <view class="left">
                    <text v-for="(itm,inx) in item.goods_tag" :key="inx">{{itm}}</text>
                  </view>
                  <view class="right">{{item.sales}}已售</view>
                </view>
                <view class="title one-omit">{{item.goods_name}}</view>
                <view class="titleMiao one-omit">{{item.remark}}</view>
                <view class="pricebtn flex flex-align flex-bt">
                  <view class="price">
                    ¥{{item.price_selling}} <text v-if="item.spec_type==1">起</text>
                  </view>
                  <button class="btns button"  hover-class="button-hover" >立即抢购</button>
                </view>
              </view>
              
            </view>
          </swiper-item> 
        </swiper>
      </view>
      <view v-else style="padding-top: 30rpx;">
        <noData acImg="/static/nodata/noshop.png" content="暂无商品" width="400rpx" color="#969799"></noData>  
      </view>
    </view>
    <TabBar :tabBarShow="0"></TabBar>
    <selstroe ref="selstroeRef" :addressInfo="addressInfo" ></selstroe>
  </view>
</template>
<script setup lang="ts">
import { ref, watch} from 'vue'
import {bannerList, goodsList, noticeList} from "@/api/login"
import TabBar from '@/components/TabBar/TabBar.vue';
import { onLoad, onReady } from "@dcloudio/uni-app";
import { getImgUrl, menuJump,debounce, getDistance, wxShare} from "@/utils/tools"
import { useAuthStore } from '@/stores/counter'
import { selfInfo } from '@/api/user';
import selstroe from './components/selstroe.vue'
import NoData from '@/components/noData.vue';
import { goodStorage } from '@/utils';
const counter = useAuthStore()
onReady(() => {
  uni.hideTabBar();
});
onLoad(()=>{
  getBanlist()
  getNotice()
  getShopList()
  if(counter.getToken){
    wxShare('', 1);
    isLeft.value = counter.dataUser.level_id
    if(isLeft.value!=3){
      getAddress()
    }
  }
  setTimeout(() => {
    toolList.value = counter.confige.navigation.filter((item: {
      status: number; type: number; 
    }) => item.type === 1 && item.status === 1);
  },100)
  
})
const swIndex = ref(0)
const toview = ref('')
const toolList = ref()
const bannerInfo = ref()
const noticeInfo = ref()
const shopList = ref<Recordable>([])
const autoplay = ref(true)
const isLeft = ref(0)
const doLogin=async(e: any)=>{
  if(counter.getToken){
    menuJump({is_tab: false,link: e,link_type: 1})
  }else{
    uni.reLaunch({
      url: '/pages/login/login' 
    }) 
  }
}
async function getBanlist(){
  bannerInfo.value =  await bannerList()
}
const getNotice = async()=>{
  let res:any = await noticeList()
  noticeInfo.value = res.notice_content
}
const getShopList = async()=>{
  let data = {page:1,page_size:100,position:1}
  let res:any = await goodsList(data)
  shopList.value =  res.list
}
function chanLeft(e: any){
  const videoElements = document.querySelectorAll('video');
  videoElements.forEach((video: HTMLVideoElement) => {
    if (!video.paused) {
      video.pause();
    }
  });
}
function tabIndex(_e: any){
  swIndex.value = _e
  toview.value = 'pro_'+_e
}
function goLogin(){
  uni.reLaunch({
    url: '/pages/login/login'
  })
}
function intervalChange(e: any){
  swIndex.value = e.detail.current
  toview.value = 'pro_'+e.detail.current
}
const goUrl = async(e: any)=>{
  console.log(e)
  const jump_type = e.jump_type
  switch (jump_type) {
    case 1: //商品详情
      menuJump({is_tab: false,link: '/pages/shop/detail?idcode='+e.params_id,link_type: 1})
      break;
    case 2: //直播间 
      menuJump({is_tab: false,link: '/pages/live/zhibo?zhibo_id='+e.params_id,link_type: 1})
      break;
    case 3: //直播间 
      menuJump({is_tab: false,link: e.jump_url,link_type: 2})
      break;
    default:
      break;
  }
}
const selstroeRef = ref()
function handleClick() {
  if(!counter.getToken){
    return
  }
 selstroeRef.value.open()
}

// 使用 debounce 包装 handleClick 函数，设置延迟时间为 500 毫秒
const debouncedHandleClick = debounce(handleClick, 500, true);

// 自提点信息
const addressInfo = ref<Recordable>({})
const getAddress = async()=>{
  counter.getStoreInfos().then((res:any)=>{
    addressInfo.value = res
    if(Object.keys(res).length!=0){
      // 获取距离
      addressInfo.value.km = getDistance(34.414525,131.525632,res.latitude,res.longitude)
    }
  })
  
  
}
</script>

<style lang="scss">
  .homeHeader{width: 100%;background: url('@/static/home/swbg01.png') no-repeat;background-size: 100% 100%;box-sizing: border-box;
    padding: 30rpx 30rpx 80rpx;color: #fff;
    .left{
      font-size: 30rpx;
      image{width: 20rpx;height: 20rpx;margin-top: 10rpx;}
    }
    .right{
      .notice{margin-left: 10rpx;position: relative;
        text{position: absolute;top: -5px;right: 0;background: #FE4927;font-size: 10px;width: 14px;height: 14px;border-radius: 100%;}
      }
      image{width: 48rpx;height: 48rpx;}
    }
    .lunbo{
      height: 410rpx;
      width: 100%;
      margin-bottom: 30rpx;margin-top: 20rpx;
      // margin: -200rpx auto 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      .screen-swiper{
        height: 100%;
        width: 100%;
        min-height: 100% !important;
        image{
          width: 100%;
          height: 400rpx;
          border-radius: 10rpx;
        }
        video{
          width: 100%;
          height: 400rpx;
          border-radius: 10rpx;
        }
      }
    }
    .notices{
      background: #fff;border-radius: 70rpx;padding: 0 20rpx;
      height: 70rpx;
      .right{height: 70rpx;width: 630rpx;
        .notices-swiper{padding: 12rpx 0;border-radius: 60rpx;margin-bottom: 0;}
      }
      .left{width: 40rpx;height: 40rpx;}
      .title{width: 600rpx;color: #7B3800;}
    }
  }
  .scroll-Y{white-space: nowrap;width: 100%;padding-right: 20rpx;box-sizing: border-box;padding-bottom: 20rpx;}
 
  .homeTool{
    .toolList{padding: 0 10rpx;
      .scroll-view-item{background: #fff;border-radius: 10rpx;padding: 20rpx 0;margin: 0 10rpx;
        text-align: center;
        .imgs{position: relative;
          .bgYuan{position: absolute;width: 120rpx;height: 40rpx;border-radius: 40rpx;background: linear-gradient(to bottom,#E7EBEF,#F5F6F7);bottom: 0;left: 50%;margin-left: -60rpx;}
          image{width: 90rpx;height: 90rpx;position: relative;z-index: 11;}
        }
        .title{font-size: 28rpx;font-weight: bold;color: #323233;margin:16rpx 0 6rpx;}
        .miaoshu{color: #969799;font-size: 22rpx;}
      }
    }
  }
  .homeTitle{
    margin: -20rpx 0 30rpx 30rpx;
  }
  .goodsSelect{margin-top: 50rpx;
    .toolList{
      .scroll-Img{display: inline-block;margin-left: 20rpx;
        border: 2px solid #F5F6F7;width: 105rpx;height: 105rpx;
        image{width: 105rpx;height: 105rpx;}
      }
      .scroll-Img.active{border:2px solid #FE7431 ;}
    }
    .goodswiper{height: 960rpx;
      .swiper-item{background: #fff;margin:0 10rpx;position: relative;border-radius: 10rpx;
        box-sizing: border-box;
        image{height: 654rpx;border-radius: 20rpx;width:100%;}
        .fanquan{position: absolute;top: 0;left: 0;width: 136rpx;height: 52rpx;border-radius: 0;}
        .miaoshu{
          .left{
            text{display: inline-block;border-radius: 30rpx;border: 1px solid #FE7431;color: #FE7431;font-size: 22rpx;padding: 5rpx 20rpx;margin-right: 10rpx;}
          }
          .right{font-size: 24rpx;color: #969799;}
        }
        .titleMiao{color: #969799;font-size: 24rpx;}
        .title{font-size: 30rpx;margin: 15rpx 0 ;}
        .pricebtn{margin: 15rpx;padding-bottom:30rpx;
          .price{font-size: 40rpx;color: #FE4927;margin-left:-10rpx;
            text{font-size: 24rpx;}
          }
          .button{background: linear-gradient(to right,#FE7431,#FE4927);color: #fff;border-radius: 80rpx;padding: 0 30rpx;}
        }
      }
    }
  }
</style>
